<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding: 0;
		}
		#chattext{
			width:350px;
			height: 153px;
			border: 1px solid ;
			float:left;
		}
		#chatselect{
			width:200px;
			height: 155px;
			border: 1px solid;
		}
		#intext{
			width:350px;
			height: 30px;
		}
		#submit{
			width:190px;
			height: 30px;
		}
	</style>
</head>
<body>
	<form action="#chattext" method="get">
		<div>
			<textarea name="chattext" id="chattext" cols ="60" rows="10"></textarea>
			<select multiple  name="chatselect" id="chatselect">
				<option>--当前用户--</option>
				<option>马福云</option>
				<option selected="selected">岳帅</option>
				<option>男宝宝</option>
				<option>女宝宝</option>
			</select><br>
			<input type="text" name="message" id="intext">
			<input id="submit" type="button" value="提交聊天！">
		</div>
	</form>
	<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
	<script>

		$("#submit").click(function() {
			var chatval = $("#chatselect").val();
			var selectStr = chatval.toString();
			var str = $("#intext").val();
			$.post("/submit", {
				name: selectStr,
				message: str
			}, function(data) {
				$("#chattext").val(data)
			})
			$("#intext").val("");
			$("textarea").scrollTop(2000);
		})
		document.onkeydown = keyListener;

		function keyListener(e) {
			if (e.keyCode == (13 && 17)) {
				var chatval = $("#chatselect").val();
				var selectStr = chatval.toString();
				var str = $("#intext").val();
				$.post("/submit", {
					name: selectStr,
					message: str
				}, function(data) {
					$("#chattext").val(data)
				})
				$("#intext").val("");
			}

		}
		// $.ajax({
		// 	url:"index.html",
		// 	cache:false,
		// 	success:function  (str) {
		// 		 $("#chattext").val(str)
		// 	}
		// })
	</script>
</body>
</html>